<template>
  <div>
    <h1>music首页</h1>
    <Carousel  loop>
      <CarouselItem v-for="item in list" :key="item._id">
        <div class="demo-carousel">
          <img :src="item.path" alt="">
        </div>
      </CarouselItem>
    </Carousel>
  </div>
</template>
<script>
import { getBanner } from "./service";

export default {
  data() {
    return {
      list: [],
    }
  },
  mounted() {
    getBanner().then((res) => {
      const { code, list } = res.data;
      if (code) return;
      this.list = list || [];
    });
  },
};
</script>
<style>
.demo-carousel {
  border: 1px solid red;
  width: 375px;
  height: 300px;
}
.demo-carousel img {
  width: 100%;
  height: 100%;
}
</style>
